<template>
	
<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
    <view class="body after-navber">
        <view class="bottom-bar">
            <view @click="saveAddress">保存</view>
        </view>
        <view>
            <view class="flex-row flex-y-center edit-row">
                <view class="flex-grow-0 row-label">收货人</view>
                <view class="flex-grow-1">
                    <input @input="inputBlur" data-name="name" placeholder=" " :value="data.name"></input>
                </view>
            </view>
            <view class="flex-row flex-y-center edit-row">
                <view class="flex-grow-0 row-label">联系电话</view>
                <view class="flex-grow-1">
                    <input @input="inputBlur" data-name="mobile" placeholder=" " type="number" :value="data.mobile"></input>
                </view>
            </view>
            <view class="flex-row flex-y-center edit-row">
                <view class="flex-grow-0 row-label">所在地区</view>
                <view @tap="showAreaPicker" class="flex-grow-1 flex-row">
                    <view class="flex-grow-1" style="text-align: right;padding-right: 24upx">
                        <block v-if="data.district==null">请选择</block>
                        <block v-else>{{data.district.province.name}} {{data.district.city.name}} {{data.district.district.name}}</block>
                    </view>
                    <view class="flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx"></image>
                    </view>
                </view>
            </view>
            <view class="flex-row flex-y-center edit-row">
                <view class="flex-grow-0 row-label">详细地址</view>
                <view class="flex-grow-1">
                    <input @input="inputBlur" data-name="detail" placeholder=" " :value="data.detail"></input>
                </view>
            </view>
						<!-- #ifdef MP-WEIXIN -->
						<view @click="getWechatAddress" class="get-wechat-address" v-if="data.__platform=='wx'">授权一键获取地址</view>
						<!-- #endif -->
        </view>
    </view>
    <comp-footer v-bind="{data:data}"></comp-footer>
		<area-picker v-bind="{data:data}" @hideAreaPicker="hideAreaPicker" @areaPickerConfirm="areaPickerConfirm" @areaPickerChange="areaPickerChange"></area-picker>
</view>

</template>

<script>var myVue = {};
	import areaPicker from '../../components/area-picker/area-picker.vue';
	var e = require("../../components/area-picker/area-picker.js");

	export default {
		extends:{
			areaPicker
		},
		components:{areaPicker},
		data(){
			return{
				data: {
					name: "",
					mobile: "",
					detail: "",
					district: null
				}
			}
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var i = this;
        i.getDistrictData(function(t) {
            e.init({
                page: i,
                data: t
            });
        }), i.setData({
            address_id: t.id
        }), t.id && (myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.address_detail,
            data: {
                id: t.id
            },
            success: function(e) {
                i.getApp.core.hideLoading(), 0 == e.code && i.setData(e.data);
            }
        }));
    },
		onShow: function() {
        myVue.getApp.page.onShow(this);
    },
		methods:{
			getDistrictData: function(e) {
        var t = myVue.getApp.core.getStorageSync(myVue.getApp.const.DISTRICT);
				var _this = this;
        if (!t) return myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), void myVue.getApp.request({
            url: myVue.getApp.api.default.district,
            success: function(i) {
                myVue.getApp.core.hideLoading(), 0 == i.code && (t = i.data, myVue.getApp.core.setStorageSync(myVue.getApp.const.DISTRICT, t), 
                e(t));
            }
        });
        e(t);
    },
    onAreaPickerConfirm: function(e) {
        this.setData({
            district: {
                province: {
                    id: e[0].id,
                    name: e[0].name
                },
                city: {
                    id: e[1].id,
                    name: e[1].name
                },
                district: {
                    id: e[2].id,
                    name: e[2].name
                }
            }
        });
    },
    saveAddress: function() {
        var e = this;
        myVue.getApp.core.showLoading({
            title: "正在保存",
            mask: !0
        });
        var t = e.data.district;
        t || (t = {
            province: {
                id: ""
            },
            city: {
                id: ""
            },
            district: {
                id: ""
            }
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.address_save,
            method: "post",
            data: {
                address_id: e.data.address_id || "",
                name: e.data.name,
                mobile: e.data.mobile,
                province_id: t.province.id,
                city_id: t.city.id,
                district_id: t.district.id,
                detail: e.data.detail
            },
            success: function(t) {
                e.getApp.core.hideLoading(), 0 == t.code && e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && myVue.getApp.core.navigateBack();
                    }
                }), 1 == t.code && e.showToast({
                    title: t.msg
                });
            }
        });
    },
    inputBlur: function(e) {
        var t = '{"' + e.currentTarget.dataset.name + '":"' + e.detail.value + '"}';
        this.setData(JSON.parse(t));
    },
    getWechatAddress: function(e) {
        var t = this;
        myVue.getApp.core.chooseAddress({
            success: function(e) {
							console.log(e)
                "chooseAddress:ok" == e.errMsg && (myVue.getApp.core.showLoading(), myVue.getApp.request({
                    url: myVue.getApp.api.user.wechat_district,
                    data: {
                        national_code: e.nationalCode,
                        province_name: e.provinceName,
                        city_name: e.cityName,
                        county_name: e.countyName
                    },
                    success: function(i) {
                        1 == i.code && t.getApp.core.showModal({
                            title: "提示",
                            content: i.msg,
                            showCancel: !1
                        }), t.setData({
                            name: e.userName || "",
                            mobile: e.telNumber || "",
                            detail: e.detailInfo || "",
                            district: i.data.district
                        });
                    },
                    complete: function() {
                        t.getApp.core.hideLoading();
                    }
                }));
            }
        });
    },
		}
	}
</script>

<style scoped>
	.bottom-bar {
	    position: fixed;
	    bottom: var(--window-bottom);
	    left: 0;
	    width: 100%;
	    z-index: 1000;
	}
	
	.bottom-bar view {
	    background: #ff4544;
	    text-align: center;
	    height: 100upx;
	    line-height: 100upx;
	    color: #fff;
	}
	
	.edit-row {
	    background: #fff;
	    height: 100upx;
	    border-bottom: 1upx solid #eeeeee;
	    padding: 0 24upx;
	}
	
	.edit-row:first-child {
	    border-top: 1upx solid #eeeeee;
	}
	
	.edit-row .row-label {
	    margin-right: 24upx;
	    min-width: 140upx;
	}
	
	.get-wechat-address {
	    text-align: center;
	    background: #09BB07;
	    color: #fff;
	    padding: 18upx 0;
	    margin: 32upx 24upx;
	    border-radius: 10upx;
	    display: block;
	}
	
	.get-wechat-address:active {
	    opacity: .85;
	}
</style>